<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="left">
          <img :src="src" alt="" />
          <div class="title">Vite-Vue3-Element-Plus后台管理平台</div>
        </div>
        <div class="right">
          <div class="user-info">欢迎你：{{ username }}</div>
          <el-button type="primary" @click="logout()">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="collapse ? '64px' : '200px'">
          <!-- 折叠按钮 -->
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="collapse ? '展开' : '折叠'"
            placement="top"
          >
            <div
              :class="[
                'iconfont',
                collapse ? 'icon-zhedie2' : 'icon-zhedie1',
                'zhedie',
              ]"
              @click="collapse = !collapse"
            ></div>
          </el-tooltip>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#4a619a"
            text-color="#fff"
            unique-opened
            :default-active="default_active"
            :default-openeds="default_openeds"
            :collapse="collapse"
            :collapse-transition="false"
          >
            <el-sub-menu
              :index="item.path"
              v-for="item in menuList"
              :key="item.id"
            >
              <template #title>
                <el-icon v-if="item.id == 125"><user /></el-icon>
                <el-icon v-else-if="item.id == 103"><coordinate /></el-icon>
                <el-icon v-else-if="item.id == 101"><goods /></el-icon>
                <el-icon v-else-if="item.id == 102"><tickets /></el-icon>
                <el-icon v-else-if="item.id == 145"><star /></el-icon>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item
                @click="toComponent(it.path)"
                :index="it.path"
                v-for="it in item.children"
                :key="it.id"
              >
                <el-icon><setting /></el-icon>
                <span>{{ it.authName }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
/*---------------------- 引入资源 ---------------------- */
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { error } from "@/utils/message";
import request from "@/utils/request";
import src from "@/assets/img/logo.png";
//引入图标
import {
  Setting,
  Coordinate,
  User,
  Goods,
  Tickets,
  Star,
} from "@element-plus/icons-vue";

/*---------------------- 定义变量 ---------------------- */
defineProps({});
let username = ref("root"),
  collapse = ref(false),
  default_active = ref(""),
  default_openeds = ref([]),
  menuList = ref([]);
const router = useRouter();

/*---------------------- 功能函数 ---------------------- */
//点击导航跳转页面
function toComponent(path) {
  console.log(path);
  router.push("/" + path);
}
//退出
let logout = () => {
  router.push("/");
  sessionStorage.removeItem("user-login");
};
//获得登录用户名
let getUserName = () => {
  let str = sessionStorage.getItem("user-login");
  if (!str) {
    return "";
  }
  let object = JSON.parse(str);
  return object.data.username;
};
//请求导航列表
async function getMenuList() {
  let option = {
    url: "menus",
    type: "get",
  };
  try {
    let { data: res } = await request(option);
    if (res.meta.status !== 200) {
      return error(res.meta.msg);
    }
    menuList.value = res.data;
  } catch (err) {
    console.log(err);
  }
}
// Mounted 生命周期函数 没有created
onMounted(() => {
  let name = getUserName();
  username.value = name;
  //调用函数
  getMenuList();
});
</script>

<style lang="scss" scoped>
@import url("@/assets/css/iconfonts.css");
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.home {
  width: 100%;
  min-width: 1200px;
  .el-container {
    .el-header {
      @include flex-center;
      justify-content: space-between;
      background-color: #006afd;
      color: #fff;
      .left {
        @include flex-center;
        img {
          width: 50px;
        }
        .title {
          font-weight: 700;
        }
      }
      .right {
        @include flex-center;
        .user-info {
          margin-right: 20px;
        }
      }
    }
    .el-container {
      height: calc(100vh - 60px);
      .el-aside {
        height: calc(100vh - 60px);
        background-color: #4a619a;
        .zhedie {
          color: #fff;
          text-align: center;
          font-size: 20px;
          padding: 10px 0;
          background-color: #3e5386;
          &:hover {
            cursor: pointer;
          }
        }
        .el-menu {
          border: none;
        }
      }
    }
  }
}
</style>